// dOOdad - Object-oriented programming framework for Javascript
// File: MyWidget.js - Test file
// Project home: https://sourceforge.net/projects/doodad-js/
// Author: Claude Petit, Quebec city
// Copyright @ 2015

if (!window.Doodad) {
	Doodad = {
		parent: window,
	};
};

initMyWidget = function() {
	var doodad = Doodad,
		widgets = doodad.Widgets;
		
	if (!widgets || !widgets.init) {
		throw new Error("'Widgets.js' is not loaded.");
	};
	if (!widgets.initialized) {
		widgets.init();
	};

	var exceptions = doodad.Exceptions,
		tools = doodad.Tools;
	
	MyWidget1 = Doodad.REGISTER(widgets.Widget.$extend(
	{
		$TYPE_NAME: 'MyWidget1',
		
		__attributes: {
			main : {
				class: 'main',
			},
			mergeTest: null,
		},
		__styles: {
			main: {
				border: "solid 1px black",
			},
		},
		
		// Test property with "value"
		message: doodad.PROPERTY({
			value: null,
			writable: true,
		}),
		
		// Test property with "get" and "set"
		__value: 1,
		value: doodad.PROPERTY({
			get: function() {
				return this.__value;
			},
			set: function(value) {
				this.__value = value;
			},
		}),
		
		// Test BIND
		onJsClick: Doodad.BIND(Doodad.JS_EVENT('dblclick', function onJsClick(ev) {
			alert('click');
		})),
		
		acquire: Doodad.OVERRIDE(function acquire() {
			this._super();
			this.onJsClick.attach(this.getContainer());
		}),
		
		render: Doodad.OVERRIDE(function render(/*optional*/container) {
			doodad.ASSERT && doodad.ASSERT(tools.isElement(container), "Invalid container.");
		
			container.innerHTML = '<span' + this.renderAttributes(['main', 'mergeTest']) + '>' + tools.escapeHtml(this.message || '') + '</span>';
			//throw new exceptions.Error("Test");
			this.setElements(container.childNodes[0]);
		}),
		unrender: Doodad.OVERRIDE(function unrender() {
			this.getContainer().innerHTML = '';
			
			this._super();
		}),
	}));

	// Test adding js event type
	MyWidget2 = Doodad.REGISTER(MyWidget1.$extend(
	{
		$TYPE_NAME: 'MyWidget2',
		
		onJsClick: Doodad.OVERRIDE(Doodad.JS_EVENT('click')),
	}));
	
	// Test overriding js event handler
	MyWidget3 = Doodad.REGISTER(MyWidget2.$extend(
	{
		$TYPE_NAME: 'MyWidget3',
		
		// Test property overriding
		_value: 1,
		value: doodad.PROPERTY({
			get: Doodad.OVERRIDE(function() {
				return this._super() + 1;
			}),
		}),

		onJsClick: Doodad.OVERRIDE(Doodad.JS_EVENT(null, function onJsClick(ev) {
			this._super(ev);
			// Test re-render
			this.message += ' Click !';
			this.render();
		})),
	}));
	
	var colors = ['white', 'red', 'magenta', 'green', 'black', 'yellow', 'blue'],
		color;

	myWidget = new MyWidget3();
	myWidget.onRender.attach(null, function onRender() {alert('render')});
	
	var id = myWidget.getIdentity();
	id.id = id.name = id.class = 'myWidget';
	myWidget.setIdentity(id);
	
	color = Math.floor(Math.random() * colors.length);
	var styles = myWidget.getStyles();
	styles.color = colors[color];
	myWidget.setStyles(styles);
	
	var attributes = myWidget.getAttributes('mergeTest');
	attributes.class = 'mergeTest';
	myWidget.setAttributes(attributes, 'mergeTest');
	
	color = Math.floor(Math.random() * colors.length);
	var styles = myWidget.getStyles('mergeTest');
	styles.backgroundColor = colors[color];
	myWidget.setStyles(styles, 'mergeTest');
	
	myWidget.message = 'Hello !';
	myWidget.render(document.getElementById('test'));
	
	//var id = myWidget.getIdentity();
	//id.id = id.name = id.class = 'myWidget2';
	//myWidget.setIdentity(id);
	//myWidget.applyIdentity(['main', 'mergeTest'], myWidget.elements);
	//var styles = myWidget.getStyles();
	//styles.color = 'brown';
	//myWidget.setStyles(styles);
	//myWidget.applyStyles(['main', 'mergeTest'], myWidget.elements);
};

Doodad.scriptsAfter = Doodad.scriptsAfter || [];
Doodad.scriptsAfter.push(
	{
		description: "Load Doodad.js", // for debug only
		dependencies : [
			{
				conditions: {
					include: [ // "and" conditions
					],
					exclude: [ // "or" conditions
						'Doodad.initialized',
					],
					optional: false,
				},
				scripts: [
					{
						fileType: 'js',
						fileName: '../Doodad.js',
						baseUrl: function(){return Doodad.Tools.getCurrentScript(document.currentScript||(function(){try{throw new Error("")}catch(ex){return ex}})())},
						optional: false,
					}, 
				],
				initializers: [
					'Doodad.init()',
				],
			}
		]
	},
	{
		description: "Load Widgets.js", // for debug only
		dependencies : [
			{
				conditions: {
					include: [ // "and" conditions
						'Doodad.initialized',
					],
					exclude: [ // "or" conditions
						'Doodad.Widgets.initialized',
					],
					optional: false,
				},
				scripts: [
					{
						fileType: 'js',
						fileName: '../Widgets.js',
						baseUrl: function(){return Doodad.Tools.getCurrentScript(document.currentScript||(function(){try{throw new Error("")}catch(ex){return ex}})())},
						optional: false,
					}, 
				],
				initializers: [
					'Doodad.Widgets.init()',
				],
			}
		]
	},
	{
		description: "Initialize MyWidget.js", // for debug only
		dependencies : [
			{
				conditions: {
					include: [ // "and" conditions
						'Doodad.Widgets.initialized',
					],
					exclude: [ // "or" conditions
						'window.MyWidget3',
					],
					optional: false,
				},
				scripts: [
					{
						fileType: 'css',
						fileName: 'MyWidget.css',
						baseUrl: function(){return Doodad.Tools.getCurrentScript(document.currentScript||(function(){try{throw new Error("")}catch(ex){return ex}})())},
						media: 'screen',
						optional: true,
					}, 
				],
				initializers: [
					'initMyWidget()',
				],
			}
		]
	}
);
